<template>
  <div id="homepage">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-row class="panel-group">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <div class="card-panel-icon-wrapper icon-people">
                <span
                  class="el-icon-user-solid card-panel-icon"
                  style="font-size: 48px;"
                ></span>
              </div>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">商品数量</div>
              <div class="card-panel-num">27</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="panel-group">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <div class="card-panel-icon-wrapper icon-people">
                <span
                  class="el-icon-chat-dot-square card-panel-icon"
                  style="font-size: 48px;"
                ></span>
              </div>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">未发货单</div>
              <div class="card-panel-num">17</div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light">
          <div id="main" style="height:400px;" ref="main"></div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10"><div class="grid-content bg-purple"><div id="myChart" style="height:400px;" ref="myChart"></div></div></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"><div id="option" style="height:400px;" ref="option"></div></div
      ></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"><div id="roundness" style="height:400px;"></div></div></el-col>
    </el-row>
  </div>
</template>

<script>
import homepage from "@/api/homepage";
// 引入 ECharts 主模块
var echarts = require("echarts");

export default {
  methods: {
    drawLine(res) {
      // 基于准备好的dom，初始化echarts实例
      let main = echarts.init(this.$refs.main);
      // 绘制图表
      main.setOption({
        title: {
          text: "7月订单",
          left: "left",
        },
        legend: {
          left: "right",
          data: ["订单数"],
        },
        color: ["#3398DB"],
        tooltip: {},

        xAxis: {
          axisTick: {
            show: false,
          },
          data: res.data.data.daysOrder[0],
        },
        yAxis: {
          type: "value",
          name: "订单数",
          min: 0,
          max: 1500,
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            barWidth: "40%",
            name: "订单数",
            type: "bar",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      });
    },
    graph(res) {
      let myChart = echarts.init(this.$refs.myChart);
      myChart.setOption({
        title: {
          text: "7日成交金额",
          left: "left",
        },
        legend: {
          left: "right",
          data: ["订单数"],
        },
        color: ["#3398DB"],
        xAxis: {
          axisTick: {
            show: false,
          },
          type: "category",
          data: res.data.data.daysSum[0],
        },
        yAxis: {
          type: "value",
          name: "订单数",
          min: 0,
          max: 1500,
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "订单数",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      });
    },
    diagram(res) {
      let option = echarts.init(this.$refs.option);
      option.setOption({
        title: {
          text: "订单地区分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "right",
          data: ["地区分布"],
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: "40%",
            center: ["50%", "60%"],
            data: res.data.data.area,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    rotundity(res) {
      let myChart = echarts.init(document.getElementById("roundness"));
      myChart.setOption({
        title: {
          text: "订单渠道分布",
          left: "left",
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: "40%",
            center: ["50%", "60%"],
            data: res.data.data.channel,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    homepage.integral().then((res) => {
      console.log(res);
      this.drawLine(res);
      this.graph(res);
      this.diagram(res);
      this.rotundity(res);
    });
  },
};
</script>

<style lang="less" scoped>
#homepage {
  padding: 60px;
}
</style>

<style>
.el-dialog__header,
.dialog-footer,
.el-tree-node__label,
.el-dialog__footer,
.el-checkbox,
.custom-tree-node {
  /*对话框的行高*/
  line-height: 0px;
}
::-webkit-scrollbar {
  /*对话框的隐藏滚动条但是可以滚动，滚动条的宽度*/
  width: 0px !important;
}
.el-col.el-col-5 {
  line-height: 30px;
  margin-right: 50px;
}
icon-people {
  padding: 20px;
}
.panel-group.el-row {
  background-color: #ffffff;
  margin-bottom: 50px;
}
.panel-group > .el-col {
  padding: 20px;
}
.el-col.el-col-24 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.card-panel-icon {
  color: #40c9c6;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}

.panel-group :hover .card-panel-icon {
  color: #ffffff;
  background-color: #40c9c6;
}
.card-panel-description {
  width: auto;
  list-style: 20px;
}
</style>
